<template>
    <vol-box :lazy="true" v-model="modelOpen" title="配置打印模板" :height="800" :width="1750" :padding="5"
        :onModelClose="onModelClose">
        <!-- <div class="box"> -->
        <div class="box-tool">
            <!-- 纸张大小 -->
            <template v-for="(value, type) in paperTypes" :key="type">
                <el-button :type="curPaperType === type ? 'primary' : ''" @click="setPaper(type, value)">
                    {{ type }}
                </el-button>
            </template>
            <el-popover title="设置纸张宽高(mm)" trigger="click" :padding="0" :width="260" placement="bottom">
                <div class="popoverContent" style="display: flex;padding:10px 0 20px 0;">
                    <el-input-number v-model="paperWidth" class="mx-4" :min="1" controls-position="right"
                        placeholder="宽(mm)" />
                    <span style="width: 20px; text-align: center;line-height: 30px;">--</span>
                    <el-input-number v-model="paperHeight" class="mx-4" :min="1" controls-position="right"
                        placeholder="高(mm)" />
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <el-button type="primary" @click="otherPaper" style=" width: 100%;">
                        确 定
                    </el-button>
                </div>
                <template #reference>
                    <el-button :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</el-button>
                </template>
            </el-popover>
            <!-- 纸张大小end -->
            <el-button type="primary" @click="print">浏览器打印</el-button>
            <el-button type="primary" @click="exportJson">导出JSON</el-button>
            <el-button type="primary" @click="preView">预览</el-button>
            <json-view :template="josnTemplate" />
        </div>
        <div class="box-content">
            <div class="rect-printElement-types hiprintEpContainer box-content-son">
            </div>
            <div id="hiprint-printTemplate" class="box-content-son"></div>
            <div id="PrintElementOptionSetting" class="box-content-son"></div>

            <!--  -->

        </div>
        <!-- 预览 -->
        <print-preview ref="preViewRef" />
        <!-- </div> -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="modelOpen = false" style="width: 100px;">取 消</el-button>
                <el-button type="primary" style="width: 100px;" @click="submitPrintTemplat">
                    确 定
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
<script>
// import { ref, onMounted, computed } from "vue";
import { ElMessage } from 'element-plus'
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import jsonView from "./json-view.vue";//生成josn模板
import printPreview from './preview.vue'//预览
import panel from './panel'//自定义打印模板
// import {hiprint, defaultElementTypeProvider} from '../hiprint/hiprint.bundle.js'
// 默认配置
import "../../uitils/hiprint/hiprint.config";
// 样式
import "../../uitils/hiprint/css/hiprint.css"
import "../../uitils/hiprint/css/print-lock.css"
import VolBox from "@/components/basic/VolBox.vue";
export default {
    components: {
        "vol-box": VolBox,
        printPreview,
        jsonView
    },
    data() {
        return {
            ID: null,
            menu: null,
            row: null,
            modelOpen: false,
            josnTemplate: null,//josn模板
            paperTypes: {// 自定义纸张
                'A3': {
                    width: 420,
                    height: 296.6
                },
                'A4': {
                    width: 210,
                    height: 296.6
                },
                'A5': {
                    width: 210,
                    height: 147.6
                },
                'B3': {
                    width: 500,
                    height: 352.6
                },
                'B4': {
                    width: 250,
                    height: 352.6
                },
                'B5': {
                    width: 250,
                    height: 175.6
                }
            },
            paperWidth: 220,
            paperHeight: 80,
            curPaper: {
                type: 'A4',
                width: 210,
                height: 296.6
            },
            //打印数据，key 对应 元素的 字段名
            printData: {
                headera: "XX信息表",
                printDate: this.currentTime(),
                // printDate: "",
                table: [
                    { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2', beizhu: "勿忘" },
                    { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' }
                ],
            },
            hiprintTemplate: null,
            //左侧配置模板原始
            leftConfigOrig: [
                new hiprint.PrintElementTypeGroup("平台", [
                    {
                        tid: 'aProviderModule.header', title: '单据表头', data: '单据表头', type: 'text',
                        options: {
                            testData: '单据表头',
                            height: 17,
                            fontSize: 16.5,
                            field: "headera",
                            fontWeight: "700",
                            textAlign: "center",
                            hideTitle: true
                        }
                    },
                    {
                        tid: 'aProviderModule.type', title: '单据类型', data: '单据类型', type: 'text',
                        options: {
                            testData: '单据类型',
                            height: 16,
                            fontSize: 15,
                            field: "textType",
                            fontWeight: "700",
                            textAlign: "center",
                            hideTitle: true
                        }
                    },
                    {
                        tid: 'aProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text',
                        options: {
                            field: 'orderId',
                            testData: 'XS888888888',
                            height: 16,
                            fontSize: 6.75,
                            fontWeight: "700",
                            textAlign: "left",
                            textContentVerticalAlign: "middle"
                        }
                    },
                    {
                        tid: 'aProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text',
                        options: {
                            field: 'date',
                            testData: '2020-01-01',
                            height: 16,
                            fontSize: 6.75,
                            fontWeight: "700",
                            textAlign: "left",
                            textContentVerticalAlign: "middle"
                        }
                    },
                    {
                        tid: 'aProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text',
                        options: {
                            field: 'barcode',
                            testData: 'XS888888888',
                            height: 32,
                            fontSize: 12,
                            lineHeight: 18,
                            textType: "barcode"
                        }
                    },
                    {
                        tid: 'aProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
                        options: {
                            field: 'qrcode',
                            testData: 'XS888888888',
                            height: 32,
                            fontSize: 12,
                            lineHeight: 18,
                            textType: "qrcode"
                        }
                    },
                    {
                        tid: 'aProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text',
                        options: {
                            testData: '平台名称',
                            height: 17,
                            fontSize: 16.5,
                            fontWeight: "700",
                            textAlign: "center",
                            hideTitle: true
                        }
                    },
                    {
                        tid: 'aProviderModule.logo', title: 'Logo', data: '/img/QHlogo.26d0d977.png', type: 'image',
                        options: {
                            testData: 'Logo',
                            src: '/img/QHlogo.26d0d977.png',
                            hideTitle: true
                        }
                    },
                ]),
                new hiprint.PrintElementTypeGroup("库管", [
                    {
                        tid: 'aProviderModule.creater', title: '制单人', data: '李四', type: 'text',
                        options: {
                            field: 'creater',
                            testData: '李四',
                            height: 16,
                            fontSize: 6.75,
                            fontWeight: "700",
                            textAlign: "left",
                            textContentVerticalAlign: "middle"
                        }
                    },
                    {
                        tid: 'aProviderModule.printDate', title: '当前时间', data: '2022-01-01 09:00', type: 'text',
                        options: {
                            field: 'printDate',
                            testData: this.currentTime(),
                            height: 16,
                            fontSize: 6.75,
                            fontWeight: "700",
                            textAlign: "left",
                            textContentVerticalAlign: "middle"
                        }
                    },
                    {
                        tid: 'aProviderModule.signer', title: '库管签字', data: '', type: 'text',
                        options: {
                            title: '库管签字：',
                            height: 16,
                            fontSize: 6.75,
                            fontWeight: "700",
                            textAlign: "left",
                            textContentVerticalAlign: "middle"
                        }
                    },
                ]),
                new hiprint.PrintElementTypeGroup("表格/其他", [
                    {
                        tid: 'aProviderModule.table', title: '订单数据',
                        type: 'table',
                        options: {
                            field: 'table',
                            tableHeaderRepeat: 'first',
                            tableFooterRepeat: 'last',
                            fields: [//这里显示与否未发现影响
                                // {text: '名称', field: 'NAME'},
                                // {text: '数量', field: 'testNum'},
                                // {text: '规格', field: 'GG'},
                                // {text: '条码', field: 'TM'},
                                // {text: '单价', field: 'DJ'},
                                // {text: '金额', field: 'JE'},
                            ],
                        },
                        editable: true,
                        columnDisplayEditable: true,//列显示是否能编辑
                        columnDisplayIndexEditable: true,//列顺序显示是否能编辑
                        columnTitleEditable: true,//列标题是否能编辑
                        columnResizable: true, //列宽是否能调整
                        columnAlignEditable: true,//列对齐是否调整
                        isEnableEditField: true, //编辑字段
                        isEnableContextMenu: true, //开启右键菜单 默认true
                        isEnableInsertRow: true, //插入行
                        isEnableDeleteRow: true, //删除行
                        isEnableInsertColumn: true, //插入列
                        isEnableDeleteColumn: true, //删除列
                        isEnableMergeCell: true, //合并单元格
                        columns: [
                            [
                                { title: '名称', align: 'center', field: 'NAME', width: 150 },
                                { title: '数量', align: 'center', field: 'testNum', width: 80 },
                                { title: '规格', align: 'center', field: 'GG', width: 80, checked: false },
                                { title: '条码', align: 'center', field: 'TM', width: 100, checked: false },
                                { title: '单价', align: 'center', field: 'DJ', width: 100 },
                                { title: '金额', align: 'center', field: 'JE', width: 100, checked: false },
                            ],
                        ],
                        rowsColumnsMerge: function (data, col, index) {
                            // 返回一个数组,参数一为行（rowspan）合并数,参数二为列（colspan）合并数, 被合并的行或者列值设为0
                            // if (index == 0) {
                            //     return [1, data.INDEX % 2 == 1 ? 2 : 1]
                            // } else if (index > 0 && index < 2) {
                            //     return [data.INDEX % 2 == 1 ? 0 : 1, 1]
                            // } else {
                            //     return [data.INDEX % 2 == 1 ? 2 : 0, 1]
                            // }
                        },
                        footerFormatter: function (options, rows, data, currentPageGridRowsData) {
                            // console.log("data", data);
                            if (data && data['totalCap']) {
                                return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
                            }
                            return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
                        },
                    },
                    { tid: 'aProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text' },
                    {
                        tid: 'aProviderModule.longText', title: '长文本', type: 'longText', options: {
                            field: 'test.longText',
                            width: 200,
                            testData: '长文本分页/不分页测试',
                        },
                    }
                ]),
                new hiprint.PrintElementTypeGroup("辅助", [
                    {
                        tid: 'aProviderModule.hline',
                        title: '横线',
                        type: 'hline'
                    },
                    {
                        tid: 'aProviderModule.vline',
                        title: '竖线',
                        type: 'vline'
                    },
                    {
                        tid: 'aProviderModule.rect',
                        title: '矩形',
                        type: 'rect'
                    },
                    {
                        tid: 'aProviderModule.oval',
                        title: '椭圆',
                        type: 'oval'
                    },
                    {
                        tid: 'aProviderModule.barcode',
                        title: '条形码',
                        type: 'barcode',
                    },
                    {
                        tid: 'aProviderModule.qrcode',
                        title: '二维码',
                        type: 'qrcode',
                    }
                ])
            ],
            //左侧配置模板
            leftConfig: [],
            //表格默认配置
            tabelConfigOrig:
            {
                tid: 'aProviderModule.table', title: '订单数据',
                type: 'table',
                options: {
                    field: 'table',
                    tableHeaderRepeat: 'first',
                    tableFooterRepeat: 'last',
                    fields: [//这里显示与否未发现影响
                        // {text: '名称', field: 'NAME'},
                        // {text: '数量', field: 'testNum'},
                        // {text: '规格', field: 'GG'},
                        // {text: '条码', field: 'TM'},
                        // {text: '单价', field: 'DJ'},
                        // {text: '金额', field: 'JE'},
                    ],
                },
                editable: true,
                columnDisplayEditable: true,//列显示是否能编辑
                columnDisplayIndexEditable: true,//列顺序显示是否能编辑
                columnTitleEditable: true,//列标题是否能编辑
                columnResizable: true, //列宽是否能调整
                columnAlignEditable: true,//列对齐是否调整
                isEnableEditField: true, //编辑字段
                isEnableContextMenu: true, //开启右键菜单 默认true
                isEnableInsertRow: true, //插入行
                isEnableDeleteRow: true, //删除行
                isEnableInsertColumn: true, //插入列
                isEnableDeleteColumn: true, //删除列
                isEnableMergeCell: true, //合并单元格
                columns: [
                    [
                        { title: '名称', align: 'center', field: 'NAME', width: 150 },
                        { title: '数量', align: 'center', field: 'testNum', width: 80 },
                        { title: '规格', align: 'center', field: 'GG', width: 80, checked: false },
                        { title: '条码', align: 'center', field: 'TM', width: 100, checked: false },
                        { title: '单价', align: 'center', field: 'DJ', width: 100 },
                        { title: '金额', align: 'center', field: 'JE', width: 100, checked: false },
                    ],
                ],
                rowsColumnsMerge: function (data, col, index) {
                    // 返回一个数组,参数一为行（rowspan）合并数,参数二为列（colspan）合并数, 被合并的行或者列值设为0
                    // if (index == 0) {
                    //     return [1, data.INDEX % 2 == 1 ? 2 : 1]
                    // } else if (index > 0 && index < 2) {
                    //     return [data.INDEX % 2 == 1 ? 0 : 1, 1]
                    // } else {
                    //     return [data.INDEX % 2 == 1 ? 2 : 0, 1]
                    // }
                },
                footerFormatter: function (options, rows, data, currentPageGridRowsData) {
                    // console.log("data", data);
                    if (data && data['totalCap']) {
                        return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
                    }
                    return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
                },
            },
            tabelConfig: {}
        };
    },
    created() {

    },
    mounted() {
        // setTimeout(() => {
        //     hiprint.init({
        //         // providers: [defaultElementTypeProvider()],
        //         providers: [this.aProvider()],
        //     });
        // })
        // setTimeout(() => {
        //     this.shuJvList()
        // })
    },
    computed: {
        curPaperType: {
            get() {
                let type = 'other'
                let types = this.paperTypes
                for (const key in types) {
                    let item = types[key]
                    let { width, height } = this.curPaper
                    if (item.width === width && item.height === height) {
                        type = key
                    }
                }
                // console.log("type", type);
                return type
            }
        }
    },
    methods: {
        onModelClose() {
            this.leftConfig = []
        },
        async open(row) {
            // this.ID = ID
            this.row = row
            // console.log("row", row)
            try {
                //用接口请求主页面的配置项
                let url = `api/q_datatable_information/getPageData`
                let params = {
                    order: "desc",
                    page: 1,
                    rows: 30,
                    sort: "表名",
                    wheres: JSON.stringify([{ name: "表名", value: row.Menu, displayType: "text" }])
                }
                await this.http.post(url, params, "").then(reslut => {
                    if (reslut.total > 0) {
                        let pageConfig = [
                        ]
                        reslut.rows.forEach(item => {
                            // console.log("item",item)
                            let obj = {
                                tid: 'aProviderModule.' + item.字段名, title: item.字段说明, data: "", type: item.字段名 == "Image" ? "image" : "text",
                                options: {
                                    testData: "",
                                    height: 17,
                                    fontSize: 8.5,
                                    field: item.字段名,
                                    fontWeight: "400",
                                    textAlign: "left",
                                    hideTitle: false,
                                    // formatter: (title, value, options, templateData, target) => {
                                    //     if (title == "审核状态") {
                                    //         if (value == 0) {
                                    //             return "待审核"
                                    //         } else if (value == 1) {
                                    //             return "审核通过"
                                    //         } else if (value == 2) {
                                    //             return "审核中"
                                    //         } else if (value == 3) {
                                    //             return "审核未通过"
                                    //         } else if (value == 4) {
                                    //             return "驳回"
                                    //         }
                                    //     }
                                    //     return ""
                                    // }
                                }
                            }
                            pageConfig.push(obj)
                        });
                        this.leftConfig.unshift(new hiprint.PrintElementTypeGroup("页面字段", pageConfig), ...this.leftConfigOrig)
                    } else {
                        this.base.ElMessageFn("请求主表字段信息失败")
                    }
                })
                //请求子页面配置
                params.wheres = JSON.stringify([{ name: "表名", value: row.Menu + "List", displayType: "text" }])
                await this.http.post(url, params, "").then(reslut => {
                    // console.log("明细表reslut", reslut);
                    this.tabelConfig = null
                    this.tabelConfig = JSON.stringify(this.tabelConfigOrig)
                    this.tabelConfig = JSON.parse(this.tabelConfig)
                    if (reslut.total > 0) {
                        let ditalList = [
                            // {
                            //     title: "test成本总价", align: 'center', field:"", width: 150
                            // }
                        ]
                        reslut.rows.forEach(item => {
                            let obj = { title: item.字段说明, align: 'center', field: item.字段名, width: 150 }
                            ditalList.push(obj)
                        })
                        this.tabelConfig.columns = [ditalList]
                        this.leftConfig.splice(1, 0, new hiprint.PrintElementTypeGroup("明细表", [this.tabelConfig]))
                    }
                })
                //请求子页面配置--end
                this.modelOpen = true
                hiprint.init({
                    // providers: [defaultElementTypeProvider()],
                    providers: [this.aProvider()]
                });
                setTimeout(() => {
                    this.shuJvList()
                })
            } catch (error) {
                console.error(error);
            }

        },
        submitPrintTemplat() {
            try {
                let PrintTemplate = this.josnTemplate.getJson()
                // console.log("PrintTemplate", PrintTemplate);
                // let menu=this.$route.name
                let url = `api/q_print_options/update`
                let { ID, TemplateName, Menu } = this.row
                let params = {
                    delKeys: null,
                    detailData: null,
                    mainData: {
                        ID: ID,
                        Menu: Menu,
                        TemplateName: TemplateName,
                        Template: JSON.stringify(PrintTemplate)
                    }
                }
                this.http.post(url, params, "").then(reslut => {
                    // console.log("reslut", reslut)
                    if (reslut.message == "保存成功") {
                        this.base.ElMessageFn(reslut.message, "success")
                        this.modelOpen = false
                        this.leftConfig = []
                        this.$emit("parentCall", $vue => {
                            $vue.refresh()
                        })

                    } else {
                        this.base.ElMessageFn(reslut.message)
                    }
                })
            } catch (error) {
                console.error(error);
            }
        },
        //自定义纸张确定按钮
        setPaper(type, value) {
            try {
                if (Object.keys(this.paperTypes).includes(type)) {
                    this.curPaper = { type: type, width: value.width, height: value.height }
                    this.hiprintTemplate.setPaper(value.width, value.height)
                } else {
                    // curPaper.value = { type: 'other', width: value.width, height: value.height }
                    this.curPaper = { type: 'other', width: value.width, height: value.height }
                    this.hiprintTemplate.setPaper(value.width, value.height)
                }
            } catch (error) {
                // this.$message.error(`操作失败: ${error}`)
                ElMessage({
                    message: '操作失败:' + error,
                    type: 'error',
                })
            }
        },
        otherPaper() {
            let value = {}
            value.width = this.paperWidth
            value.height = this.paperHeight
            // paperPopVisible.value = false
            // setPaper('other', value)
            this.setPaper('other', value)
        },
        currentTime() {
            const dateTime = new Date().getTime() + 8 * 60 * 60 * 1000;
            const currentTime = new Date(dateTime).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
            return currentTime
        },
        //自定义设计元素1
        aProvider(ops) {
            var addElementTypes = (context) => {
                context.removePrintElementTypes("aProviderModule");
                context.addPrintElementTypes(
                    "aProviderModule", this.leftConfig
                );
            };
            return {
                addElementTypes: addElementTypes
            };
        },
        shuJvList() {
            try {
                // console.log("打开")
                $('.hiprintEpContainer').empty()//设计工具
                hiprint.PrintElementTypeManager.build('.hiprintEpContainer', "aProviderModule");//这里的aProviderModule 要和aProvider内的一致
                $('#hiprint-printTemplate').empty()//面板 先清空, 避免重复构建
                $('#PrintElementOptionSetting').empty()//左侧配置，解决不刷新问题
                // console.log("panel", panel);
                const defaultTemplate = this.row.Template ? JSON.parse(this.row.Template) : panel
                // console.log("defaultTemplate", defaultTemplate);
                setTimeout(() => {
                    // console.log("打开setTimeout")
                    this.josnTemplate = this.hiprintTemplate = new hiprint.PrintTemplate({
                        // template: panel,//初始化模板
                        template: defaultTemplate,//初始化模板/
                        dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
                        history: false, // 是否需要 撤销重做功能
                        onDataChanged: (type, json) => {
                            console.log("1", type); // 新增、移动、删除、修改(参数调整)、大小、旋转
                            console.log("2", json); // 返回 template
                            // 更新模板
                            // hiprintTemplate.update(json)
                            // console.log(hiprintTemplate.historyList)
                        },
                        settingContainer: '#PrintElementOptionSetting',
                        // paginationContainer: '#PrintElementOptionSetting'//增加多面板绑定的区域
                    });
                    this.hiprintTemplate.design("#hiprint-printTemplate");
                })
            } catch (error) {
                console.error(error);
            }
        },
        //浏览器打印
        print() {
            try {
                // 参数: 打印时设置 左偏移量，上偏移量
                let options = { leftOffset: -1, topOffset: -1 };
                // 扩展
                let ext = {
                    callback: () => {
                        console.log("浏览器打印窗口已打开");
                    },
                    styleHandler: () => {
                        // 重写 文本 打印样式
                        return "<style>.hiprint-printElement-text{color:red !important;}</style>";
                    },
                };
                // 调用浏览器打印
                this.printData.printDate = this.currentTime()
                this.hiprintTemplate.print(this.printData, options, ext);
            } catch (error) {
                console.error(error);
            }
        },
        //导出JSON
        exportJson() {
            try {
                if (this.hiprintTemplate) {
                    this.down(`JSON数据_${Date.now()}`, JSON.stringify(this.hiprintTemplate.getJson() || {}));
                }
            } catch (error) {
                console.log(error);
            }
        },
        down(filename, text) {
            var pom = document.createElement("a");
            pom.setAttribute(
                "href",
                "data:text/plain;charset=utf-8," + encodeURIComponent(text)
            );
            pom.setAttribute("download", filename);
            if (document.createEvent) {
                var event = document.createEvent("MouseEvents");
                event.initEvent("click", true, true);
                pom.dispatchEvent(event);
            } else {
                pom.click();
            }
        },
        //预览
        preView() {
            console.log("预览");
            try {
                // 测试, 点预览更新拖拽元素
                // hiprint.updateElementType('defaultModule.text', (type) => {
                //     type.title = '这是更新后的元素';
                //     return type
                // })
                // 测试, 通过socket刷新打印机列表； 默认只有连接的时候才会获取到最新的打印机列表
                hiprint.refreshPrinterList((list) => {
                    console.log('refreshPrinterList')
                    console.log(list)
                });
                // 测试, 获取IP、IPV6、MAC地址、DNS
                // 参数格式：
                // 1. 类型（ip、ipv6、mac、dns、all、interface、vboxnet）
                // 2. 回调 data => {addr, e}  addr: 返回的数据 e:错误信息
                // 3. 其他参数 ...args
                hiprint.getAddress('ip', (data) => {
                    console.log('ip')
                    console.log(data)
                })
                hiprint.getAddress('ipv6', (data) => {
                    console.log('ipv6')
                    console.log(data)
                })
                hiprint.getAddress('mac', (data) => {
                    console.log('mac')
                    console.log(data)
                })
                hiprint.getAddress('dns', (data) => {
                    console.log('dns')
                    console.log(data)
                })
                hiprint.getAddress('all', (data) => {
                    console.log('all')
                    console.log(data)
                })
                // 各个平台不一样, 用法见: https://www.npmjs.com/package/address
                hiprint.getAddress('interface', (data) => {
                    console.log('interface')
                    console.log(data)
                }, 'IPv4', 'eth1')
                // this.$refs.preViewRef.show(hiprintTemplate, printData)
                // console.log("hiprintTemplate", JSON.stringify(this.hiprintTemplate));
                this.$refs.preViewRef.show(this.hiprintTemplate, this.printData)
            } catch (error) {
                console.error(error);
            }
        }
    }
}
// //josn模板
// let josnTemplate = ref(null)
// // 自定义纸张
// let paperTypes = ref({
//     'A3': {
//         width: 420,
//         height: 296.6
//     },
//     'A4': {
//         width: 210,
//         height: 296.6
//     },
//     'A5': {
//         width: 210,
//         height: 147.6
//     },
//     'B3': {
//         width: 500,
//         height: 352.6
//     },
//     'B4': {
//         width: 250,
//         height: 352.6
//     },
//     'B5': {
//         width: 250,
//         height: 175.6
//     }
// })
// // 自定义纸张
// // let paperPopVisible = ref(false)
// let paperWidth = ref(220)
// let paperHeight = ref(80)
// let curPaper = ref({
//     type: 'A4',
//     width: 210,
//     height: 296.6
// })
/**
* 设置纸张大小
* @param type [A3, A4, A5, B3, B4, B5, other]
* @param value {width,height} mm
*/
// //自定义纸张确定按钮
// function setPaper(type, value) {
//     try {
//         if (Object.keys(paperTypes.value).includes(type)) {
//             curPaper.value = { type: type, width: value.width, height: value.height }
//             hiprintTemplate.setPaper(value.width, value.height)
//         } else {
//             // curPaper.value = { type: 'other', width: value.width, height: value.height }
//             curPaper.value = { type: 'other', width: value.width, height: value.height }
//             hiprintTemplate.setPaper(value.width, value.height)
//         }
//     } catch (error) {
//         // this.$message.error(`操作失败: ${error}`)
//         ElMessage({
//             message: '操作失败:' + error,
//             type: 'error',
//         })
//     }
// }
// function otherPaper() {
//     let value = {}
//     value.width = paperWidth.value
//     value.height = paperHeight.value
//     // paperPopVisible.value = false
//     // setPaper('other', value)
//     setPaper('other', value)
// }


// const curPaperType = computed(() => {
//     // let type = 'other'
//     let type = 'other'
//     let types = paperTypes.value
//     for (const key in types) {
//         let item = types[key]
//         let { width, height } = curPaper.value
//         if (item.width === width && item.height === height) {
//             type = key
//         }
//     }
//     console.log("type", type);
//     return type
// })

// function currentTime() {
//     const dateTime = new Date().getTime() + 8 * 60 * 60 * 1000;
//     const currentTime = new Date(dateTime).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
//     return currentTime
// }
// //自定义设计元素1
// const aProvider = function (ops) {
//     var addElementTypes = function (context) {
//         context.removePrintElementTypes("aProviderModule");
//         context.addPrintElementTypes(
//             "aProviderModule",
//             [
//                 new hiprint.PrintElementTypeGroup("平台", [
//                     {
//                         tid: 'aProviderModule.header', title: '单据表头', data: '单据表头', type: 'text',
//                         options: {
//                             testData: '单据表头',
//                             height: 17,
//                             fontSize: 16.5,
//                             field: "headera",
//                             fontWeight: "700",
//                             textAlign: "center",
//                             hideTitle: true
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.type', title: '单据类型', data: '单据类型', type: 'text',
//                         options: {
//                             testData: '单据类型',
//                             height: 16,
//                             fontSize: 15,
//                             field: "textType",
//                             fontWeight: "700",
//                             textAlign: "center",
//                             hideTitle: true
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text',
//                         options: {
//                             field: 'orderId',
//                             testData: 'XS888888888',
//                             height: 16,
//                             fontSize: 6.75,
//                             fontWeight: "700",
//                             textAlign: "left",
//                             textContentVerticalAlign: "middle"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text',
//                         options: {
//                             field: 'date',
//                             testData: '2020-01-01',
//                             height: 16,
//                             fontSize: 6.75,
//                             fontWeight: "700",
//                             textAlign: "left",
//                             textContentVerticalAlign: "middle"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text',
//                         options: {
//                             field: 'barcode',
//                             testData: 'XS888888888',
//                             height: 32,
//                             fontSize: 12,
//                             lineHeight: 18,
//                             textType: "barcode"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text',
//                         options: {
//                             field: 'qrcode',
//                             testData: 'XS888888888',
//                             height: 32,
//                             fontSize: 12,
//                             lineHeight: 18,
//                             textType: "qrcode"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text',
//                         options: {
//                             testData: '平台名称',
//                             height: 17,
//                             fontSize: 16.5,
//                             fontWeight: "700",
//                             textAlign: "center",
//                             hideTitle: true
//                         }
//                     },
//                     { tid: 'aProviderModule.logo', title: 'Logo', data: '', type: 'image' },
//                 ]),
//                 new hiprint.PrintElementTypeGroup("库管", [
//                     {
//                         tid: 'aProviderModule.creater', title: '制单人', data: '李四', type: 'text',
//                         options: {
//                             field: 'creater',
//                             testData: '李四',
//                             height: 16,
//                             fontSize: 6.75,
//                             fontWeight: "700",
//                             textAlign: "left",
//                             textContentVerticalAlign: "middle"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.printDate', title: '打印时间', data: '2022-01-01 09:00', type: 'text',
//                         options: {
//                             field: 'printDate',
//                             testData: currentTime(),
//                             height: 16,
//                             fontSize: 6.75,
//                             fontWeight: "700",
//                             textAlign: "left",
//                             textContentVerticalAlign: "middle"
//                         }
//                     },
//                     {
//                         tid: 'aProviderModule.signer', title: '库管签字', data: '', type: 'text',
//                         options: {
//                             title: '库管签字：',
//                             height: 16,
//                             fontSize: 6.75,
//                             fontWeight: "700",
//                             textAlign: "left",
//                             textContentVerticalAlign: "middle"
//                         }
//                     },
//                 ]),
//                 new hiprint.PrintElementTypeGroup("表格/其他", [
//                     {
//                         tid: 'aProviderModule.table', title: '订单数据',
//                         type: 'table',
//                         options: {
//                             field: 'table',
//                             tableHeaderRepeat: 'first',
//                             tableFooterRepeat: 'last',
//                             fields: [//这里显示与否未发现影响
//                                 // {text: '名称', field: 'NAME'},
//                                 // {text: '数量', field: 'testNum'},
//                                 // {text: '规格', field: 'GG'},
//                                 // {text: '条码', field: 'TM'},
//                                 // {text: '单价', field: 'DJ'},
//                                 // {text: '金额', field: 'JE'},
//                             ],
//                         },
//                         editable: true,
//                         columnDisplayEditable: true,//列显示是否能编辑
//                         columnDisplayIndexEditable: true,//列顺序显示是否能编辑
//                         columnTitleEditable: true,//列标题是否能编辑
//                         columnResizable: true, //列宽是否能调整
//                         columnAlignEditable: true,//列对齐是否调整
//                         isEnableEditField: true, //编辑字段
//                         isEnableContextMenu: true, //开启右键菜单 默认true
//                         isEnableInsertRow: true, //插入行
//                         isEnableDeleteRow: true, //删除行
//                         isEnableInsertColumn: true, //插入列
//                         isEnableDeleteColumn: true, //删除列
//                         isEnableMergeCell: true, //合并单元格
//                         columns: [
//                             [
//                                 { title: '名称', align: 'center', field: 'NAME', width: 150 },
//                                 { title: '数量', align: 'center', field: 'testNum', width: 80 },
//                                 { title: '规格', align: 'center', field: 'GG', width: 80, checked: false },
//                                 { title: '条码', align: 'center', field: 'TM', width: 100, checked: false },
//                                 { title: '单价', align: 'center', field: 'DJ', width: 100 },
//                                 { title: '金额', align: 'center', field: 'JE', width: 100, checked: false },
//                             ],
//                         ],
//                         rowsColumnsMerge: function (data, col, index) {
//                             // 返回一个数组,参数一为行（rowspan）合并数,参数二为列（colspan）合并数, 被合并的行或者列值设为0
//                             // if (index == 0) {
//                             //     return [1, data.INDEX % 2 == 1 ? 2 : 1]
//                             // } else if (index > 0 && index < 2) {
//                             //     return [data.INDEX % 2 == 1 ? 0 : 1, 1]
//                             // } else {
//                             //     return [data.INDEX % 2 == 1 ? 2 : 0, 1]
//                             // }
//                         },
//                         footerFormatter: function (options, rows, data, currentPageGridRowsData) {
//                             console.log("data", data);
//                             if (data && data['totalCap']) {
//                                 return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>`
//                             }
//                             return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>'
//                         },
//                     },
//                     { tid: 'aProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text' },
//                     {
//                         tid: 'aProviderModule.longText', title: '长文本', type: 'longText', options: {
//                             field: 'test.longText',
//                             width: 200,
//                             testData: '长文本分页/不分页测试',
//                         },
//                     }
//                 ]),
//                 new hiprint.PrintElementTypeGroup("辅助", [
//                     {
//                         tid: 'aProviderModule.hline',
//                         title: '横线',
//                         type: 'hline'
//                     },
//                     {
//                         tid: 'aProviderModule.vline',
//                         title: '竖线',
//                         type: 'vline'
//                     },
//                     {
//                         tid: 'aProviderModule.rect',
//                         title: '矩形',
//                         type: 'rect'
//                     },
//                     {
//                         tid: 'aProviderModule.oval',
//                         title: '椭圆',
//                         type: 'oval'
//                     },
//                     {
//                         tid: 'aProviderModule.barcode',
//                         title: '条形码',
//                         type: 'barcode',
//                     },
//                     {
//                         tid: 'aProviderModule.qrcode',
//                         title: '二维码',
//                         type: 'qrcode',
//                     }
//                 ])
//             ]
//         );
//     };
//     return {
//         addElementTypes: addElementTypes
//     };
// };
// // 打印数据，key 对应 元素的 字段名
// let printData = {
//     headera: "XX信息表",
//     printDate: currentTime(),
//     table: [
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2', beizhu: "勿忘" },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' },
//         { NAME: '测试商品0231', testNum: 2, GG: '1*24g', TM: '2O22010100110', DJ: '2', JE: '2' },
//         { NAME: '测试商品02', testNum: 3, GG: '1*24g', TM: '2O22010100110', DJ: '3', JE: '3' },
//         { NAME: '测试商品0232', testNum: 4, GG: '1*24g', TM: '2O22010100110', DJ: '4', JE: '4' },
//         { NAME: '测试商品022', testNum: 5, GG: '1*24g', TM: '2O22010100110', DJ: '5', JE: '5' },
//         { NAME: '测试商品0233', testNum: 6, GG: '1*24g', TM: '2O22010100110', DJ: '6', JE: '6' },
//         { NAME: '测试商品023', testNum: 7, GG: '1*24g', TM: '2O22010100110', DJ: '7', JE: '7' }
//     ],
// };

// let hiprintTemplate;
// 初始化 provider
// hiprint.init({
//     // providers: [defaultElementTypeProvider()],
//     providers: [aProvider()],
// });

/**
 * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
// onMounted(() => {
//     // buildLeftElement();
//     // buildDesigner();
//     shuJvList()
// });
// function shuJvList() {
//     try {
//         $('.hiprintEpContainer').empty()//设计工具
//         hiprint.PrintElementTypeManager.build('.hiprintEpContainer', "aProviderModule");//这里的aProviderModule 要和aProvider内的一致
//         $('#hiprint-printTemplate').empty()//面板

//         josnTemplate.value = hiprintTemplate = new hiprint.PrintTemplate({
//             template: panel,
//             dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
//             history: false, // 是否需要 撤销重做功能
//             onDataChanged: (type, json) => {
//                 console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
//                 console.log(json); // 返回 template
//                 // 更新模板
//                 // hiprintTemplate.update(json)
//                 // console.log(hiprintTemplate.historyList)
//             },
//             settingContainer: '#PrintElementOptionSetting',
//             // paginationContainer: '#PrintElementOptionSetting'//增加多面板绑定的区域
//         });
//         hiprintTemplate.design("#hiprint-printTemplate");
//     } catch (error) {
//         console.error(error);
//     }
// }
/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 而且 必须包含 class="box-content-left-item" 否则无法拖拽进设计器
 */
const buildLeftElement = () => {
    hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
};
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */

const buildDesigner = () => {
    $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
    hiprintTemplate = new hiprint.PrintTemplate({
        settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    });
    // 构建 并填充到 容器中
    hiprintTemplate.design("#hiprint-printTemplate");
};

/**
 * 浏览器打印
 */
// const print = () => {
//     // 参数: 打印时设置 左偏移量，上偏移量
//     let options = { leftOffset: -1, topOffset: -1 };
//     // 扩展
//     let ext = {
//         callback: () => {
//             console.log("浏览器打印窗口已打开");
//         },
//         styleHandler: () => {
//             // 重写 文本 打印样式
//             return "<style>.hiprint-printElement-text{color:red !important;}</style>";
//         },
//     };
//     // 调用浏览器打印
//     printData.printDate = currentTime()
//     hiprintTemplate.print(printData, options, ext);
// };
// //基础工具
// const baseTools = ref([
//     {
//         id: 1,
//         name: "文本",
//         tid: "defaultModule.text",
//         //   icon: require("@/assets/svg/文本.svg"),
//     },
//     {
//         id: 2,
//         name: "图片",
//         tid: "defaultModule.image",
//         //   icon: require("@/assets/svg/图片.svg"),
//     },
//     {
//         id: 3,
//         name: "多行文本",
//         tid: "defaultModule.longText",
//         //   icon: require("@/assets/svg/多行文本.svg"),
//     },
//     {
//         id: 4,
//         name: "内容表格",
//         tid: "defaultModule.table",
//         //   icon: require("@/assets/svg/内容表格.svg"),
//     },
//     {
//         id: 5,
//         name: "空表格",
//         tid: "defaultModule.emptyTable",
//         //   icon: require("@/assets/svg/表格.svg"),
//     },
//     {
//         id: 6,
//         name: "html",
//         tid: "defaultModule.html",
//         //   icon: require("@/assets/svg/html.svg"),
//     },
//     {
//         id: 7,
//         name: "自定义文本",
//         tid: "defaultModule.customText",
//         //   icon: require("@/assets/svg/文本.svg"),
//     },
// ]);
// //辅助工具
// const assistTools = ref([
//     {
//         id: 1,
//         name: "横线",
//         tid: "defaultModule.hline",
//         //   icon: require("@/assets/svg/横线.svg"),
//     },
//     {
//         id: 2,
//         name: "竖线",
//         tid: "defaultModule.vline",
//         //   icon: require("@/assets/svg/竖线.svg"),
//     },
//     {
//         id: 3,
//         name: "矩形",
//         tid: "defaultModule.rect",
//         //   icon: require("@/assets/svg/矩形.svg"),
//     },
//     {
//         id: 4,
//         name: "椭圆",
//         tid: "defaultModule.oval",
//         //   icon: require("@/assets/svg/椭圆.svg"),
//     },
// ]);

/**
 * @description: 导出json
 * @return {*}
 */
// const exportJson = () => {
//     if (hiprintTemplate) {
//         down(`JSON数据_${Date.now()}`, JSON.stringify(hiprintTemplate.getJson() || {}));
//     }
// };

// const down = (filename, text) => {
//     var pom = document.createElement("a");
//     pom.setAttribute(
//         "href",
//         "data:text/plain;charset=utf-8," + encodeURIComponent(text)
//     );
//     pom.setAttribute("download", filename);
//     if (document.createEvent) {
//         var event = document.createEvent("MouseEvents");
//         event.initEvent("click", true, true);
//         pom.dispatchEvent(event);
//     } else {
//         pom.click();
//     }
// };
// //预览
// const preViewRef = ref()
// function preView() {
//     console.log("预览");
//     try {
//         // 测试, 点预览更新拖拽元素
//         // hiprint.updateElementType('defaultModule.text', (type) => {
//         //     type.title = '这是更新后的元素';
//         //     return type
//         // })
//         // 测试, 通过socket刷新打印机列表； 默认只有连接的时候才会获取到最新的打印机列表
//         hiprint.refreshPrinterList((list) => {
//             console.log('refreshPrinterList')
//             console.log(list)
//         });
//         // 测试, 获取IP、IPV6、MAC地址、DNS
//         // 参数格式：
//         // 1. 类型（ip、ipv6、mac、dns、all、interface、vboxnet）
//         // 2. 回调 data => {addr, e}  addr: 返回的数据 e:错误信息
//         // 3. 其他参数 ...args
//         hiprint.getAddress('ip', (data) => {
//             console.log('ip')
//             console.log(data)
//         })
//         hiprint.getAddress('ipv6', (data) => {
//             console.log('ipv6')
//             console.log(data)
//         })
//         hiprint.getAddress('mac', (data) => {
//             console.log('mac')
//             console.log(data)
//         })
//         hiprint.getAddress('dns', (data) => {
//             console.log('dns')
//             console.log(data)
//         })
//         hiprint.getAddress('all', (data) => {
//             console.log('all')
//             console.log(data)
//         })
//         // 各个平台不一样, 用法见: https://www.npmjs.com/package/address
//         hiprint.getAddress('interface', (data) => {
//             console.log('interface')
//             console.log(data)
//         }, 'IPv4', 'eth1')
//         // this.$refs.preViewRef.show(hiprintTemplate, printData)
//         console.log("preViewRef", preViewRef);
//         preViewRef.value.show(hiprintTemplate, printData)
//     } catch (error) {
//         console.error(error);
//     }
// }
</script>

<style lang="less" scoped>
ul,
ol {
    list-style: none;
}

/*rect-printElement-type hiprint-printElement-type */
.rect-printElement-types .hiprint-printElement-type {
    display: block;
}

.rect-printElement-types .hiprint-printElement-type {
    padding: 0 0 0 0;
    list-style: none;
}

.rect-printElement-types .hiprint-printElement-type>li>.title {
    display: block;
    padding: 4px 0px;
    clear: both;
}

.rect-printElement-types .hiprint-printElement-type>li>ul {
    padding: 0 0 0 0;
    display: block;
    list-style: none;
}

.rect-printElement-types .hiprint-printElement-type>li>ul>li {
    display: block;
    width: 50%;
    float: left;
    max-width: 100px;
}

.rect-printElement-types .hiprint-printElement-type>li>ul>li>a {
    height: 62px;
    padding: 12px 6px;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-right: 5px;
    width: 95%;
    max-width: 100px;
    display: inline-block;
    text-align: center;
    margin-bottom: 7px;
    box-sizing: border-box;
    color: #000 !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
}

// .box {
//     // height: 1330px;
// }

.box-tool {
    display: flex;

    .content {
        display: flex;
    }
}

::v-deep(.box-tool>.el-button) {
    margin-left: 0;
    margin-right: 10px;
}

// 修改 页眉/页脚线 样式
::v-deep(.hiprint-headerLine),
::v-deep(.hiprint-footerLine) {
    border-color: red !important;
}

::v-deep(.hiprint-headerLine:hover,
    .hiprint-footerLine:hover) {
    border-top: 3px dashed red !important;
}

::v-deep(.hiprint-headerLine:hover:before) {
    content: "页眉线";
    left: calc(50% - 18px);
    position: relative;
    background: #ffff;
    top: -12px;
    color: red;
    font-size: 12px;
}

::v-deep(.hiprint-footerLine:hover:before) {
    content: "页脚线";
    left: calc(50% - 18px);
    position: relative;
    color: red;
    background: #ffff;
    top: -12px;
    font-size: 12px;
}

.box-content {
    display: flex;
    overflow: auto;
    height: 740px;
    justify-content: center;
    margin: 10px 0;

    // width: 100%;
    // background-color: #337ab7;
    .box-content-son {
        flex: 1;
        padding: 10px;
        overflow: auto;
        border: 1px solid #999;
        // width: 30%;
    }

    .hiprintEpContainer {
        min-width: 95px;
    }

    #hiprint-printTemplate {
        flex: 3;
        // max-width: ;
        overflow: auto;
        margin: 0 20px;
        padding: 30px 0 0 30px;
    }
}

::v-deep .ep-draggable-item {
    height: 50px !important;
}

// build 拖拽
::v-deep .hiprint-printElement-type>li>ul>li>a {
    padding: 4px 4px;
    color: #1296db;
    line-height: 1;
    height: auto;
    text-overflow: ellipsis;
}

// 配置图片
::v-deep .hiprint-printElement-image-content {
    img {
        content: url("@/assets/imgs/QHlogo.png");
    }
}
</style>